<template>
  <page-view class="flex-column">
    <title-bar :showBack="false">
      杨哥点餐
      <template #right-menu v-if="!userInfo">
        <span class="iconfont iconuser" @click="$router.push({name:'login'})"></span>
      </template>
    </title-bar>
    <div class="content-box flex-1">
      <div class="wrapper" ref="wrapper">
        <div class="content">
          <div class="swiper-box">
            <swiper :options="swiperOption" class="top-swiper">
              <swiper-slide v-for="(item,index) in bannerImgList" :key="index">
                <img v-lazy="item" alt="">
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <!-- 下面是一个菜品信息 -->
          <div class="food-list">
            <food-item v-for="(item) in foodList" :key="item.id" :fitem="item"></food-item>
          </div>
          <loading-box v-if="isShowLoading">菜品加载中。。。</loading-box>
        </div>
      </div>
    </div>
  </page-view>
</template>
<script>
import {Swiper, SwiperSlide} from "vue-awesome-swiper";
import "swiper/swiper-bundle.css";
import SwiperCore, {Autoplay, Pagination} from "swiper";

SwiperCore.use([Autoplay, Pagination]);
import foodItem from "../components/food-item.vue";
import Api from "../utils/Api";
import BScorll from "better-scroll";
import LoadingBox from '../components/loading-box.vue';
import {mapGetters} from "vuex";

export default {
  name: "chooseFood",
  data() {
    return {
      pageCount: 0,
      pageEnd: 0,
      pageIndex: 1,
      pageStart: 1,
      totalCount: 0,
      foodList: [],
      scroll: null,
      isShowLoading: false,
      bannerImgList: [
        require("../assets/img/01.jpg"),
        require("../assets/img/02.jpg"),
        require("../assets/img/03.jpg"),
        require("../assets/img/04.jpg")
      ]
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
    swiperOption() {
      return {
        autoplay: {
          delay: 1000
        },
        pagination: {
          el: ".swiper-pagination"
        }
      }
    }
  },
  created() {
    this.query();
  },
  methods: {
    async query(pageIndex = 1) {
      this.isShowLoading = true;
      let results = await Api.foodInfo.getListByPage({pageIndex: pageIndex});
      this.pageCount = results.pageCount;
      this.pageEnd = results.pageEnd;
      this.pageIndex = results.pageIndex;
      this.pageStart = results.pageStart;
      this.totalCount = results.totalCount;
      this.foodList.push(...results.listData);
      this.isShowLoading = false;
      if (pageIndex == 1) {
        var list = this.foodList.slice(0, 4);
        if (list.length > 0) {
          this.bannerImgList = list.map(item => this.baseURL + item.food_img);
        }
        ;
      }
      ;
      this.isShowLoading = false;
    }
  },
  components: {
    Swiper, SwiperSlide, foodItem,
    LoadingBox
  },
  watch: {
    foodList: {
      deep: true,
      handler(newValue) {
        if (!this.scroll) {
          this.$nextTick(() => {
            this.scroll = new BScorll(this.$refs.wrapper, {
              pullUpLoad: true,
              click: true
            });
            this.scroll.on("pullingUp", async () => {
              if (this.pageIndex < this.pageCount && this.isShowLoading == false) {
                let newPageIndex = +this.pageIndex + 1;
                await this.query(newPageIndex);
                // 完成上拉请求之后要告诉插件请求完成
                this.scroll.finishPullUp();
              } else {
                this.scroll.finishPullUp();
              }
            })
          });
        }
      }
    }
  },
  updated() {
    if (this.scroll) {
      this.scroll.refresh();
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  height: 100%;
  overflow: hidden;
  @media only screen and (min-width: 769px) {
    & {
      overflow: auto;
    }
  }
}

.swiper-box {
  width: 100%;
  height: 2.2rem;

  .top-swiper {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.food-list {

}
</style>